import React, { useState, useEffect } from 'react'
import { useSearchParams, useNavigate } from 'umi'
import { fetchItems } from '@/api'
import Navbar from '@/components/Navbar'
import './assets/style.scss'
import Items from './components/Items'
export default function index() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  // 排序状态
  const [orderParams, setOrderParams] = useState({
    orderIndex: 0, // 0 销量排序 1 价格 2 新品
    updown: 0 // 升序 1 降序
  })
  // 按照销量或者新品排序
  const switchOrderStatus = (activeIndex:number) => {
    setOrderParams({
      ...orderParams,
      orderIndex: activeIndex
    })
  }
  // 按照价格排序
  const orderByPrice = () => {
    /* 
      1此时按照 销量和新品 点击按照价格 的 升序
      2 就是按照价格排序  切换 升序还是降序
    */
    if (orderParams.orderIndex !== 1) {
      // 按照销量或者新品排序
      setOrderParams({
        orderIndex: 1,
        updown: 0
      })
    } else {
      // 切换升序还是降序
      if (orderParams.updown === 0) {
        setOrderParams({
          orderIndex: 1,
          updown: 1
        })
      } else {
        setOrderParams({
          orderIndex: 1,
          updown: 0
        })
      }
    }
  }
  // 请求数据
  const [items, setItems] = useState([]);
  const getItems = () => {
    // 判断orderParams 决定按照什么排序
    let orderStatus = 'ordersDown';
    switch (orderParams.orderIndex) {
      case 0:
        // 按照销量降序排序
        orderStatus = 'ordersDown';
        break;
      case 2:
        // 按照新品降序排序
        orderStatus = 'addedDown';
        break;
      case 1:
        // 按照价格排序
        if (orderParams.updown === 0) {
          // 价格升序
          orderStatus = 'priceUp';
        } else {
          orderStatus = 'priceDown';
        }
        break;
      default:
        break;
    }
    fetchItems({
      categoryId: searchParams.get('cateId'),
      orderBy: orderStatus
    }).then(res => {
      if(res.data.code === 0) {
        setItems(res.data.data.result)
      }
    })
  }

  // 监听 请求参数变化重新发送请求
  useEffect(() => {
    getItems()
  }, [orderParams])
  return (
    <div>
      <Navbar title="商品列表" />
      {/* 排序栏 */}
      <div className="order-bar">
        <div
          onClick={
            () => {
              switchOrderStatus(0)
            }
          }
          className={`order sale ${orderParams.orderIndex === 0 && 'active'}`}>
          <span>销量</span>
        </div>
        <div
          onClick={
            orderByPrice
          }
          className={`order price ${orderParams.orderIndex === 1 && 'active'}`}>
          <span>价格</span>
          <div className={`triangle up ${(orderParams.orderIndex === 1 && orderParams.updown === 0) && 'active'}`}></div>
          <div className={`triangle down ${(orderParams.orderIndex === 1 && orderParams.updown === 1) && 'active'}`}></div>
        </div>
        <div
          onClick={
            () => {
              switchOrderStatus(2)
            }
          }
          className={`order news ${orderParams.orderIndex === 2 && 'active'}`}>
          <span>新品</span>
        </div>
      </div>
      {/* /排序栏 */}
      {/* 商品 */}
      <Items items={items} clickItems={
            (id: number) => {
              navigate(`/detail/${id}`)
            }
          } clickCartIcon={() => {}}/>
      {/* /商品 */}
    </div>
  )
}
